<template>
  <div id="navbar-top">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      style="margin-top: 2vh; width: 95vw"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="0" style="margin-left: 4vw">
        <h2>智慧餐厅系统</h2>
      </el-menu-item>
      <div class="flex-grow" />
      <el-menu-item index="1" @click="toPage('home')">首页</el-menu-item>
      <el-sub-menu index="2" style="margin-right: 4vw" @click="toLogin">
        <template #title>{{ username }}</template>
        <el-menu-item index="2-1">修改密码</el-menu-item>
        <el-menu-item index="2-2" @click="logout">退出登录</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script>
import { useStore } from "vuex";
import router from "@/router";
import { ref, computed } from "vue";

export default {
  name: "NavBarTop",
  setup() {
    let store = useStore();
    let username = computed(() => {
      if (store.state.user.is_login) {
        return store.state.user.username;
      } else {
        return "未登录";
      }
    });
    const activeIndex = ref("1");
    const handleSelect = () => {};
    let logout = () => {
      if (username.value == "未登录") {
        return;
      } else {
        store.commit("logout");
        router.push({ name: "user-login" });
      }
    };
    const toPage = (name) => {
      router.push({ name: name });
    };
    const toLogin = () => {
      if (username.value == "未登录") {
        router.push({ name: "user-login" });
      }
    };
    return {
      logout,
      toPage,
      toLogin,
      username,
      handleSelect,
      activeIndex,
    };
  },
};
</script>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
</style>
